/**
 * 装车报表list页面
 * @author xiaoxujs
 */

import { Button, ConfigProvider, DatePicker, Input, message, Popover, Select, Space, Spin, Table, TableProps } from "antd";
import { ZCFormInputKong, ZCFormListBox, ZCFormListTitle, ZCFormSearchBox, ZhuangcheFormListBox } from "./style"
import { useCallback, useEffect, useState } from "react";
import { useWindowFontSize } from "../../../assets/fun/Antd/configprovider";
import { IZcbbZyCarDetailSelect, IZcbbZyCarDetailSelectParams } from "../../../type/ZhuangcheForm";
import { postZcbbZyCarDetailSelect } from "../api";
import { IFenye, IFile } from "../../../type/commit";
import { plateColorArrSelect } from "../../../assets/data";
import { RangeValue, TablePaginationPosition } from "../../../type/antd";
import ImageModule from './components/ImageModule';
import VideoModule from './components/VideoModule';
import { basicIp } from "../../../api/http";
import dayjs from "dayjs";

const { RangePicker } = DatePicker;

const ZhuangcheFormList = () => {
    const contentValue: TablePaginationPosition = "bottomCenter"; //位置
    const height = useWindowFontSize(35);

    const [searchInputValue, setSearchInputValue] = useState<string>(''); // 车牌号查询
    const [plateColor, setPlateColor] = useState<string>('蓝'); //车牌颜色
    const [listData, setListData] = useState<IZcbbZyCarDetailSelect[]>([]);
    const [paging, setPaging] = useState({
        currentPage: 1,
        pageSize: 10,
    });
    const [total, setTotal] = useState(0);
    const [dataTimes, setDataTimes] = useState<RangeValue>();
    const [imageShow, setImageShow] = useState(false); //图片显示
    const [imageUrl, setImageUrl] = useState<string>(); // 图片地址
    const [videoShow, setVideoShow] = useState(false); //视频
    const [videoUrl, setVideoUrl] = useState<string>(); // 视频地址
    const [loadingShow, setLoadingShow] = useState(false);

    const listFun = useCallback(async (params: IZcbbZyCarDetailSelectParams) => {
        setLoadingShow(true)
        const { code, msg, data } = (await postZcbbZyCarDetailSelect(
            params
        )) as IFenye<IZcbbZyCarDetailSelect>;
        if (code === 20000) {
            setListData(data.records);
            setPaging({
                currentPage: params.currentPage,
                pageSize: params.pageSize,
            })
            setTotal(data.total);
        } else {
            message.error(msg);
        }
        setLoadingShow(false)
    }, []);

    useEffect(() => {
        const params = {
            currentPage: 1,
            pageSize: 10,
        }
        listFun(params);
    }, [listFun])

    /**
     * 查询
     */
    const handleSearchInput = async () => {
        const params = {
            currentPage: 1,
            pageSize: 10,
            plateNumber: searchInputValue,
            plateColor: plateColor
        }
        setDataTimes(undefined)
        listFun(params);
    }
    /**
     * 日期查询
     */
    const handleDateTime = (datas: RangeValue, dateStrings: string[]) => {
        const params = {
            currentPage: 1,
            pageSize: 10,
            plateNumber: searchInputValue,
            plateColor: plateColor,
            startTime: dateStrings[0],
            endTime: dateStrings[1],
        }
        setDataTimes(datas)
        listFun(params);
    }
    const handleCallback = () => {
        setImageUrl(undefined);
        setImageShow(false);
    }
    const handleVideoCallback = () => {
        setVideoShow(false);
        setVideoUrl(undefined);
    }

    const pagination = {
        //分页
        position: [contentValue],
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        // showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${total}条`,
        //每页条数
        pageSize: paging.pageSize,
        //当前页数
        current: paging.currentPage,
        //数据总数
        total: total,
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current: number, pageSize: number) => {
            const params = {
                currentPage: current,
                pageSize: pageSize,
                plateNumber: searchInputValue,
                plateColor: plateColor,
                startTime: dataTimes ? dayjs(dataTimes[0]).format('YYYY-MM-DD') : undefined,
                endTime: dataTimes ? dayjs(dataTimes[1]).format('YYYY-MM-DD') : undefined,
            }
            listFun(params)
        },
    };

    const popoverContent = (arr: IFile[]) => {
        return <>
            {
                arr.map(item => <Button type="link" onClick={() => {
                    setImageUrl(basicIp + item.url);
                    setImageShow(true);
                }} key={item.fileId}>{item.fileName}</Button>)
            }
        </>
    }

    const columns: TableProps<IZcbbZyCarDetailSelect>['columns'] = [
        {
            title: '序号',
            align: 'center',
            render: (text, record, index) => <span>{(paging.currentPage * paging.pageSize) - 10 + index + 1}</span>,
        },
        {
            title: '货品',
            dataIndex: 'goods',
            align: 'center',
        },
        {
            title: '车牌号',
            align: 'center',
            render: (_, record) => <span>{record.plateColor + record.plateNumber}</span>
        },
        {
            title: '预计装车量(吨)',
            dataIndex: 'preloadAmount',
            align: 'center',
        },
        {
            title: '实际装车量(吨)',
            dataIndex: 'exactAmount',
            align: 'center',
        },
        {
            title: '开始装车照片',
            align: 'center',
            render: (text, record) => <Space>
                <Popover content={popoverContent(record.startLoadPicture)} trigger='hover'>
                    <Button type="link" >查看图片</Button>
                </Popover>
            </Space>
        },
        {
            title: '完成装车照片',
            align: 'center',
            render: (text, record) => <Space>
                <Popover content={popoverContent(record.endLoadPicture)} trigger="hover">
                    <Button type="link" >查看图片</Button>
                </Popover>
            </Space>
        },
        {
            title: '装车过程视频',
            dataIndex: 'loadVideo',
            align: 'center',
            render: (text, rocord) => <Button type="link" onClick={() => {
                setVideoUrl(rocord.loadVideo.url)
                setVideoShow(true);
            }}>{rocord.loadVideo.fileName}</Button>

        },
        {
            title: '装车时间',
            dataIndex: 'loadingTime',
            align: 'center',
        },
    ];

    return <ZhuangcheFormListBox>
        <div>
            <div className="lgl-title-button-style">
                <div className="lgl-title-button-style-nei">
                    装车控制
                </div>
            </div>
        </div>
        <ZCFormSearchBox>
            <div className="zcfs-item-box">
                <div className="input_title">
                    车辆查询
                </div>
                <div className="input_box">
                    <ConfigProvider
                        theme={{
                            token: {
                                lineWidth: 0
                            }
                        }}
                    >
                        <Select value={plateColor} onChange={(value) => setPlateColor(value)} style={{ width: '7rem' }} options={[plateColorArrSelect]} />
                        <Input allowClear value={searchInputValue} onChange={(e) => setSearchInputValue(e.target.value)} />
                    </ConfigProvider>
                    <div className="gun"></div>
                    <span className="iconfont" onClick={() => handleSearchInput()}>&#xe605;</span>
                </div>
            </div>
        </ZCFormSearchBox>
        <Spin tip="加载中..." spinning={loadingShow}>
            {
                listData.length === 0 ? <ZCFormInputKong>
                    <div className="kong-image" />
                    <div className="kong-text">请在上方搜索车牌号</div>
                </ZCFormInputKong> : <ZCFormListBox>
                    <ZCFormListTitle>
                        <div className="title-text">装车记录</div>
                        <div className="title-search-time">
                            <div className="title-search-time-title">日期</div>
                            <ConfigProvider
                                theme={{
                                    token: {
                                        controlHeight: height
                                    },
                                }}
                            >
                                <RangePicker value={dataTimes} onChange={handleDateTime} showTime />
                            </ConfigProvider>
                        </div>
                    </ZCFormListTitle>
                    <Table<IZcbbZyCarDetailSelect>
                        columns={columns}
                        dataSource={listData}
                        pagination={pagination}
                        rowKey='detailId'
                    />
                </ZCFormListBox>
            }
        </Spin>

        <ImageModule visible={imageShow} handleCallback={handleCallback} src={imageUrl} />
        <VideoModule open={videoShow} handleVideoCallback={handleVideoCallback} url={videoUrl} />
    </ZhuangcheFormListBox>
}

export default ZhuangcheFormList;